<template>
  <div class="name_item">
    {{ text }}
    <div class="line diagonal-1"></div>
    <div class="line diagonal-2"></div>
    <div class="line horizontal"></div>
    <div class="line vertical"></div>
  </div>
</template>
      
   <script>
export default {

  props: {
    text: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit("closeModal");
      window.location.reload();
    },
  },
};
</script>
      
   <style scoped>
.name_item {
  width: 120rpx;
  height: 120rpx;
  opacity: 1;
  border: 1px solid #492310;
  font-size: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3d3d3d;
  position: relative;
}

.line {
  position: absolute;
  background-color: #a78e6f;
  opacity: 0.2;
}

/* 对角线 1 */
.diagonal-1 {
  width: 1px;
  height: 100%;
  transform: rotate(45deg);
  top: 0;
  left: 30px;
  opacity: 0.2;
}

/* 对角线 2 */
.diagonal-2 {
  width: 1px;
  height: 100%;
  transform: rotate(-45deg);
  top: 0;
  right: 30px;
  opacity: 0.2;
}

/* 水平线 */
.horizontal {
  width: 100%;
  height: 1px;
  top: 30px;
  left: 0;
  opacity: 0.2;
}

/* 垂直线 */
.vertical {
  width: 1px;
  height: 100%;
  top: 0;
  left: 30px;
  opacity: 0.2;
}
</style>
      